<template>
    <div class="payment-wallet-blank">


        <h2>Wallet top-up</h2>

        <div class="p">You can top up via bank transfer. <br>
            Get a 2% cashback on transfers (e.g., transfer 1000 USD, receive 1020 USD in your POD wallet).</div>

        <div class="since">Since bank transfers incur lower transaction fees than other payment methods, we're pleased
            to
            pass on these savings to you, increasing your profit.</div>


        <div class="bank" v-html="bank.content"></div>

        <div class="p">
            Please take screenshots of the bank slip and contact customer service immediately after transferring.<br>
            If our finance team receives your payment without a top-up request from our customer service team, we will
            directly refund it to your original payment account.
        </div>


        <div class="contact-button">
            <div class="top-btn" @click="openWindow('https://m.me/PodPartnerCo')">
                <img src="https://img.podpartner.com/static/images-20231130/messenger.png"
                     style="width: 18px; height: 18px" alt="" />
                <a @click.prevent href="https://m.me/PodPartnerCo">Messenger</a>
            </div>
            <div class="top-btn" @click="gotoWhatsapp()">
                <img src="https://img.podpartner.com/static/images-20231130/whatsapp-active.png"
                     style="width: 18px; height: 18px;" alt="" />
                <a>Whatsapp</a>
            </div>
        </div>

        <div class="email">Email: service@podpartner.com</div>

    </div>

</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    props: {
        bank: { type: Object, default: () => ({}) }
    },
    data () {
        return {

        };
    },
    methods: {

        openWindow (url) {
            window.open(url, "_blank");
        },
        gotoWhatsapp () {
            this.$gmeRepore('whatsapp').then(e => {
                let path = "http://wa.me/message/4V7UTTIJDLJFD1"
                window.open(path, "_blank");
            })
        },

    },
    created () {

        console.log(this.bank.content);
    },
    beforeDestroy () {
    }
};
</script>
<style lang="scss" scoped>
.payment-wallet-blank {
    width: 816px;
    box-sizing: border-box;
    padding: 48px;
    display: flex;
    flex-direction: column;

    &>h2 {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 24px;
        color: #000000;
        line-height: 28px;
        text-align: center;
        margin-bottom: 20px;
    }

    &>.p {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
        line-height: 22px;
        margin-top: 12px;
    }

    &>.since {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 12px;
        color: #555555;
        line-height: 22px;
        margin-top: 8px;
    }

    .bank {

        margin-top: 12px;
        padding: 20px 24px;
        background: #F5F5F5;
        border-radius: 6px;
        border: 1px solid #EDEDED;
        font-size: 0;

        &::v-deep p {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #292929;
            line-height: 28px;
        }
    }

    .contact-button {
        display: flex;
        justify-content: center;
        padding-top: 48px;
        position: relative;

        .top-btn {


            font-size: 14px;
            color: #000000;
            box-sizing: border-box;
            height: 34px;
            background: #ffffff;
            width: 200px;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 5px;

            &:hover {
                cursor: pointer;
                // border-color: #ea4c89;
                background: #f6f6f6;
            }

            &>a {
                &:hover {
                    color: #000000 !important;
                    text-decoration: none;
                }

                color: #000000;
                margin: 0 0 0 4px;
            }


            i {
                &:nth-child(2) {
                    color: #fbbc06;
                }

                font-size: 24px;

                &.icon-zhandianditu-kaishiliaotian {
                    color: #48c4ef;
                }

                &.icon-zhandianditu-youjian {
                    color: #f8cf1e;
                }
            }
        }

        .top-btn+.top-btn {
            margin-left: 6px;
        }
    }

    .email {
        margin-top: 14px;
        text-align: center;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #757575;
        line-height: 22px;
    }

}
</style>
